{% extends '__base__.html' %}

{% block title %}编辑用户{% endblock %}

{% block content %}
    <div class="container">
        
        <div class="row">
            <div class="col-md-12 pb-4">
                <div class="card mb-4">
                    <div class="card-header">
                        用户
                    </div>
                    <div class="card-body">
                        <form class="needs-validation" novalidate action="/user/save">
                            <input type="hidden" name="id" {% if user %} value="{{ user.id }}" {% else %} value="-" {% endif %}>
                            <div class="form-group">
                              <label for="nameInput">姓名</label>
                              <input type="text" name='name' class="form-control" id="nameInput" placeholder="姓名" {% if user %}value="{{ user.name }}"{% endif %} required>
                              <div class="invalid-feedback">
                                  用户名已注册
                                </div>
                            </div>
                            <div class="form-group">
                              <label for="emailInput">邮箱</label>
                              <input type="text" name='email' class="form-control" id="emailInput" placeholder="邮箱" {% if user %}value="{{ user.email }}"{% else %}required{% endif %}>
                              <div class="invalid-feedback">
                                邮箱已注册
                              </div>
                            </div>
                            <div class="form-group">
                              <label for="passwordInput">密码</label>
                              <input type="password" name='password' class="form-control" id="passwordInput" placeholder="密码"required>
                              <div class="invalid-feedback">
                                密码格式不正确
                              </div>
                            </div>
                            <div class="custom-control custom-switch">
                              <input type="checkbox" class="custom-control-input" name='admin'  id="customSwitch1" {% if user and user.admin %}checked{% endif %}>
                              <label class="custom-control-label" for="customSwitch1">管理员</label>
                            </div>
                            <div class="form-group">
                              <label for="imageInput">头像</label>
                              <input type="text" name='image' class="form-control" id="imageInput" placeholder="头像" {% if user %}value="{{ user.image }}"{% endif %} >
                            </div>
                          <div class="form-group">
                            <button type="submit" class="btn btn-primary">提交</button>
                            <button type="reset" class="btn btn-primary">重置</button>
                          </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block beforebody %}
<!-- <script src="/static/app.js"></script> -->
<script>
    let form = document.querySelector('form.needs-validation')
      form && form.addEventListener('submit', function(event) {
          event.preventDefault();
          event.stopPropagation();
          if (form.checkValidity() === false) {
              form.classList.add('was-validated');
              return
          }
          form.querySelectorAll('[name]').forEach(e=>{e.classList.remove('is-invalid')})
          url = form.action
          axios.post(url, {
              id: form.id.value,
              name: form.name.value,
              email: form.email.value,
              admin: form.admin.checked ,
              image: form.image.value,
              password: sha1(form.email.value+ ':' + sha1(form.password.value)).toString(),
          })
          .then(function (response) {
              // console.log(response);
              if (response.status === 200) {
                  let data = response.data
                  if (data['code'] === 0) {
                      console.log('SUCCESS: ' + data['msg'])
                      location.assign('/users')
                  } else {
                      console.log('FAILED: ' + data['msg'])
                      let field = form[data['field']]
                      let feedback = field.parentNode.querySelector('.invalid-feedback')
                      feedback.innerText = data['msg']
                      field.classList.add('is-invalid')
                  }
              }
          })
          .catch(function (error) {
              console.log(error);
          });
      }, false);
  </script>
{% endblock %}